<!--河道综合管理页面-->
<style lang="less" scoped>
.river {
  margin: 15px;
  .icon-btn {
    font-size: 20px;
    color: #555555;
  }
  .smallForm {
    display: inline-block;
  }
  .smallArr {
    width: 15%;
    display: inline-block;
  }
  .formItem {
    width: 200px;
  }
  .mr20 {
    margin-right: 20px;
  }
  .ml20 {
    margin-left: 20px;
  }
}
.btn_position {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 150px;
}
.btn_position1 {
  position: absolute;
  bottom: 0;
  left: 160px;
  z-index: 999;
  width: 150px;
}
.btn_position2 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 999;
  width: 150px;
}
@media screen and (max-width: 1534px) {
  .river {
    .smallForm {
      display: inline-block;
    }
    .mr20 {
      margin-right: 5px;
    }
    .ml20 {
      margin-left: 5px;
    }
  }
}
</style>

<template>
  <div class="river">
    <Card :bordered="false">
      <p slot="title"
         class="white">河湖管理 > <span class="select-font">河道综合管理</span>
        <span style="margin-left: 200px;color: #2C83E6">主要河道：{{main}}条</span>
        <span style="margin-left: 50px;color: #2C83E6">支干河涌：{{tributary}}条</span>
        <span style="margin-left: 50px;color: #2C83E6">主干河涌：{{mainRiver}}条</span>
      </p>
      <div>
        <Button type="primary"
                @click.native="newRiver"
                class="mr20">新增河流</Button>
        <!-- <Button type="error"
                @click.native="del1"
                class="mr20">删除河流</Button> -->
        <Form :model="formItem"
              class="smallForm">
          <Input v-model="formItem.name"
                 class="formItem mr20"
                 :maxlength="30"
                 placeholder="请输入河流名称"></Input>
          <Input v-model="formItem.river_no"
                 class="formItem mr20"
                 :maxlength="30"
                 placeholder="请输入河流编号"></Input>
          <Select clearable
                  class="formItem mr20"
                  placeholder="请选择区"
                  v-model="formItem.area">
            <Option value="禅城区">禅城区</Option>
            <Option value="南海区">南海区</Option>
            <Option value="高明区">高明区</Option>
            <Option value="三水区">三水区</Option>
            <Option value="顺德区">顺德区</Option>
          </Select>
        </Form>
        <Button type="info"
                class="ml20"
                @click="getRiver(actionPage)">搜索</Button>
      </div>
    </Card>
    <div class="">
      <Table @on-selection-change="showSelect"
             :data="riverData"
             :columns="riverColumns"
             stripe></Table>
      <Page class="pull-right"
            :total="Page.total"
            :current="Page.current"
            :page-size="Page.pageSize"
            size="small"
            show-total
            @on-change="changePage"></Page>
    </div>

    <Modal v-model="editModal"
           title="河流信息"
           :mask-closable="false"
           width="1000">
      <i-col span="24"
             id="riverMessage">
        <Form :model="riverItem"
              :label-width="100"
              :rules="rules" 
              ref="editForm">
          <i-col span="24">
            <Form-item label="河流名称"
                       prop="river_name">
              <Input v-model="riverItem.river_name"
                     :maxlength="16"
                     placeholder="请输入河流名称"></Input>
            </Form-item>
            <Form-item label="河流编号"
                       v-show="riverItem.is_river_no || !btnSave"
                       prop="river_no">
              <Input v-model="riverItem.river_no"
                     :maxlength="30"
                     placeholder="请输入河流编号"  
                     :disabled="isEdit"></Input>
            </Form-item>
            <i-col span="24">
              <i-col span="8">
                <Form-item label="所属区"
                           prop="area">
                  <Select multiple
                          v-model="riverItem.area">
                    <Option v-for="item in areaList"
                            :key="item"
                            :value="item">{{item}}</Option>
                  </Select>
                </Form-item>
                <Form-item label="等级"
                           prop="level">
                  <Select v-model="riverItem.level"
                          clearable>
                    <Option value="市级">市级</Option>
                    <Option value="区级">区级</Option>
                    <Option value="镇级">镇级</Option>
                  </Select>
                </Form-item>
                <Form-item label="河流宽度(M)"
                           prop="width">
                  <Input v-model="riverItem.width"
                         :maxlength="30"
                         placeholder="请输入河流宽度"></Input>
                </Form-item>
              </i-col>
              <i-col span="8">
                <Form-item label="所属镇"
                           prop="town">
                  <Select multiple
                          filterable
                          v-model="riverItem.town">
                    <Option v-for="item in townList"
                            :key="item.name"
                            :value="item.name">{{item.name}}</Option>
                  </Select>
                </Form-item>
                <Form-item label="类型"
                           prop="type">
                  <Select v-model="riverItem.type"
                          clearable>
                    <Option value="主要河道">主要河道</Option>
                    <Option value="主干河涌">主干河涌</Option>
                    <Option value="支涌">支涌</Option>
                  </Select>
                </Form-item>
                <Form-item label="是否分段">
                  <Select v-model="riverItem.is_patr">
                    <Option value="1">是</Option>
                    <Option value="0">否</Option>
                  </Select>
                </Form-item>
              </i-col>
              <i-col span="8">
                <Form-item label="所属村"
                           prop="village">
                  <Select multiple
                          filterable
                          v-model="riverItem.village">
                    <Option v-for="item in villageList"
                            :key="item.name"
                            :value="item.name">{{item.name}}</Option>
                  </Select>
                </Form-item>
                <Form-item label="河流长度(KM)"
                           prop="length">
                  <Input v-model="riverItem.length"
                         :maxlength="30"
                         placeholder="请输入河流长度"></Input>
                </Form-item>
                <Form-item v-show="riverItem.is_patr === '1'"
                           label="父河流">
                  <Select filterable
                          v-model="riverItem.parent">
                    <Option v-for="item in riverList"
                            :key="item.river_no"
                            :value="item.river_no">{{item.river_name}}</Option>
                  </Select>
                </Form-item>
              </i-col>
            </i-col>
          </i-col>
        </Form>
      </i-col>
      <i-col span="24">
        <Button type="primary"
                @click="clear_map"
                v-if="chongHui"
                class="btn_position">重绘</Button>
        <Button type="info"
                class="btn_position"
                @click="addRiver"
                v-if="!chongHui">下一段</Button>
        <Button class="btn_position2"
                v-if="!chongHui && !btnSave"
                @click="showMap(saveArr)">取消</Button>
        <Button class="btn_position2"
                v-if="btnSave"
                @click="clearMap">取消</Button>
        <div id="riverMap"
             style="width: 100%;height: 400px;">

        </div>
      </i-col>
      <div slot="footer">
        <Button v-if="btnSave"
                type="primary"
                @click="ok">保存</Button>
        <Button v-if="!btnSave"
                type="primary"
                @click="changeRiver">修改</Button>
        <Button @click="editModal = false">取消</Button>
      </div>
    </Modal>
    <del-modal title="河流"
               ref="delModal"
               @del="del"
               :delArr="selectData"
               :url="urlRiverDel"></del-modal>
    <Modal class="spe-modal"
           v-model="daoruModal"
           :mask-closable="false"
           title="上传一河一策"
           width="800">
      <Upload type="drag"
              :format="['pdf']"
              :max-size="102400"
              :on-exceeded-size="handleMaxSize"
              :on-format-error="handleFormatError"
              :on-success="handleSuccess"
              :on-error="handleError"
              :action="daoruUrl" 
              ref="uploadPdf">
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload"
                size="52"
                style="color: #3399ff"></Icon>
          <p>上传一河一策正文pdf</p>
        </div>
      </Upload>
      <Upload multiple
              type="drag"
              :format="['pdf','doc','docx','word','jpg','png','rar','zip','jpeg','txt','xls','xlsx']"
              :on-format-error="handleFormatError2"
              :on-success="handleSuccess2"
              :on-error="handleError"
              :max-size="20480"
              :on-exceeded-size="handleMaxSize2"
              :action="daoruUrl2" 
              ref="uploadDoc">
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload"
                size="52"
                style="color: #FF0000"></Icon>
          <p>上传一河一策附件</p>
        </div>
      </Upload>
      <div slot="footer">
        <Button type="primary"
                @click="uploadFile">保存</Button>
        <Button @click="daoruModal = false">取消</Button>
      </div>
      <loading v-show="showLoading"></loading>
    </Modal>
    <Modal v-model="dangModal"
           title="上传一河一档"
           :mask-closable="false"
           width="1000">
      <Form :label-width="60">
        <Form-item label="正文"
                   prop="content">
          <div ref="editor"
               style="text-align:left"></div>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button type="primary"
                @click="changeDang">确定</Button>
        <Button @click="dangModal = false">取消</Button>
      </div>
    </Modal>
    <Modal title="查看图片"
           width="800"
           v-model="visible">
      <img :src="imgName"
           v-if="visible"
           style="width: 100%">
    </Modal>

    <Modal v-model="history"
           :mask-closable="false"
           width="800">
      <div class="white"
           slot="header">河长调出历史</div>
      <Table :columns="columnsHistory"
             :data="dataHistory"></Table>
    </Modal>
    <!-- 删除河流Modal -->
    <Modal class="spe-modal"
           v-model="riverModal"
           :mask-closable="false"
           title="删除河流"
           width="800">
      <Upload type="drag"
              :format="['pdf']"
              :max-size="102400"
              :on-exceeded-size="handleMaxSize"
              :on-format-error="handleFormatError"
              :on-success="handleRiverSuccess"
              :on-error="handleError"
              :action="riverFileUrl" 
              ref="uploadRiver">
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload"
                size="52"
                style="color: #3399ff"></Icon>
          <p>删除河湖数据，需上传PDF证明文件</p>
        </div>
      </Upload>
      <div slot="footer">
        <Button type="primary"
                @click="delRiver">保存</Button>
        <Button @click="hideRiverModal">取消</Button>
      </div>
    </Modal>
    <directories ref="directories"></directories>
  </div>
</template>

<script>
import {
  loadingMixin,
  interactModelMixin,
  aPictureModelMixin,
} from 'common/js/mixins';
import { ajaxPost } from 'global/axios';
import { domain } from 'global/setting';
import storage from 'good-storage';
import delModal from 'public/delModal';
import tableDropdown from 'public/tableHeaderDropdown';
import directories from './directories';
import E from 'wangeditor';
let map1 = null;
let listener = null;
let listener2 = null;
let count = 0;
let editor = null;
export default {
  mixins: [loadingMixin, interactModelMixin, aPictureModelMixin],
  components: {
    'del-modal': delModal,
    directories,
  },
  data() {
    return {
      urlRiverList: '/bsi/riverchief/list',
      urlRiverEdit: '/bsi/riverchief/edit',
      urlRiverNew: '/bsi/riverchief/new',
      urlchrefList: '/bsi/riverchief/find',
      urlRiverDel: '/bsi/riverchief/del',
      urlTreeList: '/sys/department/getTree',
      urlUserList: '/sys/userinfo/findbyrole',
      urlYiHeYiCe: '/bsi/riverplane/new',
      urlchrefNew: '/bsi/riverchief/addchief',
      urlchrefDel: '/bsi/riverchief/delchief',
      urlYiHeYiDang: '/bsi/riverarchives/new',
      urlRiverNum: '/bsi/riverchief/statnum',
      urlTownList: '/law/city/list',
      receiveData: [],
      main: '',
      areaList: ['禅城区', '南海区', '高明区', '三水区', '顺德区'],
      townList: [],
      villageList: [],
      riverList: [],
      mainRiver: '',
      tributary: '',
      uploadUrl2: '',
      riverLat: 23.009912294150357,
      riverLng: 113.12484741210938,
      rules: {
        river_name: [
          { required: true, message: '河流名不能为空', trigger: 'blur' },
        ],
        river_no: [
          { required: true, message: '河流编号不能为空', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择河流类型', trigger: 'change' },
        ],
      },
      formItem: {
        name: '',
        area: '',
        type: '',
        river_no: '',
      },
      Page: {
        current: 1,
        pageSize: 13,
        total: 0,
      },
      typeList: [
        {
          value: 'all',
          name: '全部',
        },
        {
          value: '主要河道',
          name: '主要河道',
        },
        {
          value: '主干河涌',
          name: '主干河涌',
        },
        {
          value: '支涌',
          name: '支干河涌',
        },
      ],
      riverColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left',
        },
        {
          title: '河流名称',
          key: 'river_name',
        },
        {
          title: '所属区',
          key: 'area',
        },
        {
          title: '所属镇',
          key: 'town',
        },
        {
          title: '河流编号',
          key: 'river_no',
        },
        {
          title: '长度(km)',
          key: 'length',
        },
        {
          title: '类型',
          key: 'type',
          renderHeader: (h, params) => {
            return h(tableDropdown, {
              props: {
                placement: 'bottom-start',
                showArrow: true,
                content: '类型',
                data: this.typeList,
              },
              on: {
                'on-choosed': data => {
                  if (data !== 'all') {
                    this.formItem.type = data;
                    this.getRiver();
                  } else {
                    this.formItem.type = '';
                    this.getRiver();
                  }
                },
              },
            });
          },
        },
        {
          title: '操作',
          width: 420,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      $('.ivu-upload-list').html('');
                      this.content_pdf = [];
                      this.enc_file = [];
                      this.daoruModal = true;
                      this.daoruUrl = `${domain}/filemanage/uploadpdf?dir=/river/strategy/${
                        params.row.river_no
                      }&token=${storage.session.get('token')}`;
                      this.daoruUrl2 = `${domain}/filemanage/upload?dir=/river/strategy/${
                        params.row.river_no
                      }&token=${storage.session.get('token')}`;
                      this.river_name = params.row.river_name;
                      this.river_no = params.row.river_no;
                      this.$refs.uploadPdf.clearFiles(); // 清空上传过的一河一策正文pdf
                    },
                  },
                },
                '一河一策'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.dangModal = true;
                      this.river_name = params.row.river_name;
                      this.river_no = params.row.river_no;
                      this.findContent(params.row.river_no);
                      this.imgFile = [];
                    },
                  },
                },
                '一河一档'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    },
                  },
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'warning',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.$refs.directories.edit(params.row);
                    },
                  },
                },
                '名录编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      // this.$refs.directories.edit(params.row)
                      this.showHistory(params.row);
                    },
                  },
                },
                '调任历史'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.riverModal = true
                      this.riverFileUrl = `${domain}/filemanage/uploadpdf?dir=/river/strategy/${
                        params.row.river_no
                      }&token=${storage.session.get('token')}`;
                      this.delRiverData = {
                        _id: params.row._id,
                        files: []
                      }
                    },
                  },
                },
                '删除'
              ),
            ]);
          },
        },
      ],
      riverData: [],
      daoruModal: false,
      editModal: false,
      riverModal: false,
      riverItem: {
        river_name: '',
        area: [],
        river_no: '',
        length: '',
        _id: '',
        chref_name: '',
        level: '',
        width: '',
        type: '',
        town: [],
        village: [],
      },
      daoruUrl: '',
      daoruUrl2: '',
      riverFileUrl: '',
      actionPage: '1',
      chrefColumns: [
        {
          title: '名字',
          key: 'realname',
        },
        {
          title: '职位',
          key: 'position',
        },
        {
          title: '所属河长办',
          render: (h, params) => {
            return params.row.departments[0].name;
          },
        },
        {
          title: '角色',
          render: (h, params) => {
            return params.row.roles[0].rolename;
          },
        },
        {
          title: '操作',
          render: (h, params) => {
            return h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small',
                },
                on: {
                  click: () => {
                    this.delCherf(params.index);
                  },
                },
              },
              '删除'
            );
          },
        },
      ],
      chrefData: [],
      areaArr: [],
      area: [],
      content_pdf: '',
      enc_file: [],
      river_name: '',
      river_no: '',
      chongHui: true,
      saveArr: [],
      saveRow: {},
      latArr_gcj02: [],
      bigArr_gcj02: [],
      showLoading: false,
      modal2: false,
      selectData: [],
      dangModal: false,
      uploadList: [],
      imgFile: [],
      visible: false,
      btnSave: true,
      editorContent: '',
      history: false,
      columnsHistory: [
        {
          title: '河长名字',
          key: 'realname',
          align: 'center',
        },
        {
          title: '调任情况',
          key: 'remark',
          align: 'center',
        },
        {
          title: '河流名称',
          key: 'river_name',
          align: 'center',
        },
        {
          title: '调任方式',
          key: 'log_type',
          align: 'center',
        },
        {
          title: '调任时间',
          key: 'logdt',
          align: 'center',
        },
        {
          title: '职位',
          key: 'position',
          align: 'center',
        },
        {
          title: '河长等级',
          key: 'user_type',
          align: 'center',
        },
      ],
      dataHistory: [],
      delRiverData: [],
      isEdit: false // 是否编辑
    };
  },
  methods: {
    findContent(no) {
      let params = {
        data: {
          river_no: no,
        },
        url: '/bsi/riverarchives/find',
        token: storage.session.get('token'),
        success: res => {
          if (res.data.result.content) {
            editor.txt.html(res.data.result.content);
          } else {
            editor.txt.clear();
          }
        },
      };
      ajaxPost(params);
    },
    handleMaxSize2(file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: `文件太大，不能超过 20M。`,
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: `文件太大，不能超过 100M。`,
      });
    },
    getRiver(page = 1) {
      let params = {
        data: {
          searchValue: {
            type: '湖泊水库|#|ne',
          },
          page,
          pageSize: this.Page.pageSize,
          order: { river_no: 1 },
          basis: 2,
        },
        url: this.urlRiverList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.Page.total = res.data.result.totalSize;
          this.riverData = res.data.result.result;
        },
      };
      if (this.formItem.name !== '') {
        params.data.searchValue.river_name = `${this.formItem.name}|#|like`;
      }
      if (this.formItem.area !== '') {
        params.data.searchValue.area = `${this.formItem.area}|#|like`;
      }
      if (this.formItem.type !== '') {
        params.data.searchValue.type = `${this.formItem.type}|#|like`;
      }
      if (this.formItem.river_no !== '') {
        params.data.searchValue.river_no = `${this.formItem.river_no}|#|like`;
      }
      ajaxPost(params);
      this.getRiverNum();
    },
    changePage(page) {
      this.actionPage = page;
      this.getRiver(page);
    },
    handleSuccess(res) {
      let fileList = this.$refs.uploadPdf.fileList;
      let beforePath = ''; // 如果文件重复，则保存上一个上传成功的文件
      if(this.enc_file.length > 0){
        if(this.enc_file.indexOf(res.result.path) !== -1){
          this.$Message.warning('不能上传两个相同的文件，请重新上传');
          this.$refs.uploadPdf.fileList.splice(-1, 1); // 删除最后一个元素
          beforePath = fileList[0].response.result.path;
        }
      }
      if(fileList.length > 1){
        this.$refs.uploadPdf.fileList.splice(0, 1); // 如果文件超过1个，只保留最后一个
      }
      this.content_pdf = beforePath ? beforePath :res.result.path;
      // this.content_pdf = res.result.path;
    },
    handleSuccess2(res) {
      if(res.result.path === this.content_pdf){ 
        this.$Message.warning('不能上传两个相同的文件，请重新上传');
        this.$refs.uploadDoc.fileList.splice(-1, 1); // 删除最后一个元素
      }else{
        this.enc_file.push(res.result.path);
      }
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: `文件格式不正确，请上传 pdf 格式。`,
      });
    },
    handleFormatError2(file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: `文件格式不正确，请上传图片或者word文档，Excel文档，pdf文档，压缩文件的其中一种。`,
      });
    },
    handleError() {
      this.$Message.warning({
        content: '上传失败',
      });
    },
    edit(row) {
      this.isEdit = true;
      this.editModal = true;
      this.btnSave = false;
      this.saveRow = row;
      this.riverItem.river_no = row.river_no;
      this.riverItem.river_name = row.river_name;
      this.riverItem.length = row.length;
      this.riverItem.level = row.level;
      this.riverItem._id = row._id;
      this.riverItem.type = row.type;
      this.riverItem.width = row.width;
      this.riverItem.is_patr = row.is_patr;
      if (row.area !== '' && row.area !== undefined) {
        let data = row.area.split(',');
        this.riverItem.area = data;
      }
      if (row.town !== '' && row.town !== undefined) {
        let data1 = row.town.split(',');
        this.riverItem.town = data1;
      }
      if (row.village !== '' && row.village !== undefined) {
        let data1 = row.village.split(',');
        this.riverItem.village = data1;
      }
      let params = {
        data: {
          river_no: row.river_no,
        },
        url: this.urlchrefList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.chrefData = res.data.result.users;
          this.saveArr = res.data.result.river_geo;
          this.showMap(res.data.result.river_geo);
        },
      };
      ajaxPost(params);
    },

    showHistory(row) {
      let params = {
        data: {
          logdt: '2020-07-22 13:22:00',
          log_type: 'delete', //delete或add
          river_no: row.river_no, //河流编号
          river_name: row.river_name, //河流名
          type_name: '', //暂时忽略
          username: storage.session.get('username'), //用户名
          realname: storage.session.get('realname'), //用户姓名
          user_type: storage.session.get('user_type'), //用户类型
        },
        url: this.urlchrefList,
        token: storage.session.get('token'),
        success: res => {
          console.log(res);
          this.history = true;
          let result = res.data.result.transfer_logs;
          let list = [];
          result.map(item => {
            let obj = {};
            obj.realname = item.realname;
            obj.remark = item.remark;
            obj.river_name = item.river_name;
            obj.logdt = item.logdt;
            obj.log_type = item.log_type === 'add' ? '就任' : '离任';
            obj.user_type = this.getUserType(item.user_type);
            obj.position = item.position;
            list.push(obj);
          });
          this.dataHistory = list;
        },
      };
      ajaxPost(params);
    },

    getUserType(type) {
      let ty;
      switch (type) {
        case '0':
          ty = '村级河长';
          break;
        case '1':
          ty = '镇级河长';
          break;
        case '2':
          ty = '区级河长';
          break;
        case '3':
          ty = '市级河长';
          break;
        case '6':
        case '9':
          ty = '河长助理';
          break;
      }
      return ty;
    },

    newRiver() {
      this.$refs.editForm.resetFields(); // 对表单进行重置
      this.isEdit = false;
      this.clearMap();
      this.editModal = true;
      this.chongHui = false;
      this.btnSave = true;
      this.riverItem = {
        river_name: '',
        river_no: '',
        length: '',
        level: '',
        _id: '',
        width: '',
        type: '',
        area: [],
        town: [],
        village: [],
        is_river_no: true,
        is_patr: '0',
        parent: '',
      };
    },
    clearMap() {
      this.bigArr_gcj02 = [];
      this.latArr_gcj02 = [];
      let maps = document.getElementById('riverMap');
      maps.innerHTML = '';
      let center = new qq.maps.LatLng(23.009912294150357, 113.12484741210938);
      map1 = new qq.maps.Map(maps, {
        center,
        zoom: 10,
      });
      let path1 = [];
      listener = qq.maps.event.addListener(map1, 'click', event => {
        let cirle = new qq.maps.Circle({
          center: new qq.maps.LatLng(
            event.latLng.getLat(),
            event.latLng.getLng()
          ),
          radius: 4,
          fillColor: '#ff0000',
          map: map1,
        });
        path1.unshift(
          new qq.maps.LatLng(event.latLng.getLat(), event.latLng.getLng())
        );
        let polyline = new qq.maps.Polyline({
          path: path1,
          strokeColor: '#ff0000',
          strokeWeight: 3,
          editable: false,
          map: map1,
        });
        this.latArr_gcj02.push({
          lat: event.latLng.getLat(),
          lng: event.latLng.getLng(),
        });
      });
    },
    ok() {
      if (this.latArr_gcj02.length != 0) {
        this.bigArr_gcj02.push(this.latArr_gcj02);
      }
      let params = {
        data: {
          river_name: this.riverItem.river_name,
          river_no: this.riverItem.river_no,
          length: this.riverItem.length,
          area: this.riverItem.area.join(),
          town: this.riverItem.town.join(),
          village: this.riverItem.village.join(),
          is_patr: this.riverItem.is_patr,
          parent: this.riverItem.parent,
          level: this.riverItem.level,
          type: this.riverItem.type,
          big_gcj02: this.bigArr_gcj02,
          width: this.riverItem.width,
        },
        url: this.urlRiverNew,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code === '0000') {
            this.$Loading.finish();
            this.$Message.success({
              content: '新增成功',
            });
            this.editModal = false;
            this.getData(this.actionPage);
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    showMap(row) {
      this.chongHui = true;
      let maps = document.getElementById('riverMap');
      maps.innerHTML = '';
      let center = new qq.maps.LatLng(
        row[0].route_gcj02[0].lat,
        row[0].route_gcj02[0].lng
      );
      this.riverLat = row[0].route_gcj02[0].lat;
      this.riverLng = row[0].route_gcj02[0].lng;
      let map = new qq.maps.Map(maps, {
        center,
        zoom: 12,
      });
      row.map(item => {
        let path1 = [];
        for (let i = 0; i < item.route_gcj02.length; i++) {
          path1.push(
            new qq.maps.LatLng(item.route_gcj02[i].lat, item.route_gcj02[i].lng)
          );
        }
        let polyline = new qq.maps.Polyline({
          path: path1,
          strokeColor: '#FF0000',
          strokeWeight: 2,
          editable: false,
          map,
        });
      });
    },
    changeRiver() {
      if (this.latArr_gcj02.length != 0) {
        this.bigArr_gcj02.push(this.latArr_gcj02);
      }
      let params = {
        data: {
          river_name: this.riverItem.river_name,
          river_no: this.riverItem.river_no,
          length: this.riverItem.length,
          area: this.riverItem.area.join(),
          town: this.riverItem.town.join(),
          village: this.riverItem.village.join(),
          is_patr: this.riverItem.is_patr,
          parent: this.riverItem.parent,
          _id: this.riverItem._id,
          level: this.riverItem.level,
          width: this.riverItem.width,
          type: this.riverItem.type,
          big_gcj02: this.bigArr_gcj02,
        },
        url: this.urlRiverEdit,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.$Loading.finish();
            this.$Message.success({
              content: '修改成功',
            });
            this.editModal = false;
            this.getRiver(this.actionPage);
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      if (this.riverItem.length == '') {
        params.data.length = 0;
      }
      ajaxPost(params);
    },
    getAddress() {
      let params = {
        data: {},
        url: this.urlTreeList,
        token: storage.session.get('token'),
        success: res => {
          this.areaArr = res.data.result;
        },
      };
      ajaxPost(params);
    },
    getReceive(dep) {
      let params = {
        data: {
          dep_name: dep,
        },
        url: this.urlUserList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.receiveData = res.data.result;
        },
      };
      ajaxPost(params);
    },
    getTown(area) {
      let params = {
        data: {
          fieldName: ['name', 'level'],
          basis: 2,
          searchValue: {
            level: '3',
          },
        },
        url: this.urlTownList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.townList = res.data.result.result;
        },
      };
      let deps = JSON.parse(storage.session.get('department'));
      if (deps[0].level == '1') {
        params.data.searchValue.level2 = '';
        area.map((item, index) => {
          if (index == area.length - 1) {
            params.data.searchValue.level2 += `${item}|#|in`;
          } else {
            params.data.searchValue.level2 += `${item},`;
          }
        });
      }
      ajaxPost(params);
    },
    getVillage(area) {
      let params = {
        data: {
          fieldName: ['name', 'level'],
          basis: 2,
          searchValue: {
            level: '4',
          },
        },
        url: this.urlTownList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.villageList = res.data.result.result;
        },
      };
      let deps = JSON.parse(storage.session.get('department'));
      if (deps[0].level == '1') {
        params.data.searchValue.level3 = '';
        area.map((item, index) => {
          if (index == area.length - 1) {
            params.data.searchValue.level3 += `${item}|#|in`;
          } else {
            params.data.searchValue.level3 += `${item},`;
          }
        });
      }
      ajaxPost(params);
    },
    uploadFile() {
      if (this.content_pdf.length < 1) {
        this.$Message.warning('必须上传pdf文件');
        return false;
      }
      this.showLoading = true;
      let params = {
        data: {
          content_pdf: this.content_pdf,
          enc_file: this.enc_file,
          river_name: this.river_name,
          river_no: this.river_no,
        },
        url: this.urlYiHeYiCe,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.$Loading.finish();
            this.$Message.success({
              content: '上传成功',
            });
            this.showLoading = false;
            this.daoruModal = false;
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
            this.showLoading = false;
          }
        },
      };
      ajaxPost(params);
    },
    clear_map() {
      this.bigArr_gcj02 = [];
      this.latArr_gcj02 = [];
      this.chongHui = false;
      let maps = document.getElementById('riverMap');
      maps.innerHTML = '';
      let center = new qq.maps.LatLng(this.riverLat, this.riverLng);
      map1 = new qq.maps.Map(maps, {
        center,
        zoom: 12,
      });
      let path1 = [];
      listener = qq.maps.event.addListener(map1, 'click', event => {
        let cirle = new qq.maps.Circle({
          center: new qq.maps.LatLng(
            event.latLng.getLat(),
            event.latLng.getLng()
          ),
          radius: 4,
          fillColor: '#ff0000',
          map: map1,
        });
        path1.unshift(
          new qq.maps.LatLng(event.latLng.getLat(), event.latLng.getLng())
        );
        let polyline = new qq.maps.Polyline({
          path: path1,
          strokeColor: '#ff0000',
          strokeWeight: 3,
          editable: false,
          map: map1,
        });
        this.latArr_gcj02.push({
          lat: event.latLng.getLat(),
          lng: event.latLng.getLng(),
        });
      });
    },
    addRiver() {
      qq.maps.event.removeListener(listener);
      if (count > 0) {
        qq.maps.event.removeListener(listener2);
      }
      let path1 = [];
      listener2 = qq.maps.event.addListener(map1, 'click', event => {
        let cirle = new qq.maps.Circle({
          center: new qq.maps.LatLng(
            event.latLng.getLat(),
            event.latLng.getLng()
          ),
          radius: 4,
          fillColor: '#ff0000',
          map: map1,
        });
        path1.unshift(
          new qq.maps.LatLng(event.latLng.getLat(), event.latLng.getLng())
        );
        let polyline = new qq.maps.Polyline({
          path: path1,
          strokeColor: '#ff0000',
          strokeWeight: 3,
          editable: false,
          map: map1,
        });
        this.latArr_gcj02.push({
          lat: event.latLng.getLat(),
          lng: event.latLng.getLng(),
        });
      });
      this.bigArr_gcj02.push(this.latArr_gcj02);
      this.latArr_gcj02 = [];
      count++;
    },
    showSelect(data) {
      this.selectData = data; // 把勾选的数组存起来
    },
    del1() {
      if (this.selectData.length > 0) {
        this.$refs.delModal.showModal();
      } else {
        this.$Message.warning('请选择河长牌');
      }
    },
    del() {
      this.selectData = [];
      this.getRiver(this.actionPage);
    },
    // 取消保存删除河流文件
    hideRiverModal() {
      this.$refs.uploadRiver && this.$refs.uploadRiver.clearFiles();
      this.delRiverData = [];
      this.riverModal = false;
    },
    // 上传删除河流文件
    handleRiverSuccess(res) {
      console.log(res)
      let fileList = this.$refs.uploadRiver.fileList;
      if(this.delRiverData.files.length > 0){
        if(this.delRiverData.files.indexOf(res.result.path) !== -1){
          this.$Message.warning('不能上传两个相同的文件，请重新上传');
          this.$refs.uploadRiver.fileList.splice(-1, 1); // 删除最后一个元素
        }
      }
      // if(fileList.length > 1){
      //   this.$refs.uploadRiver.fileList.splice(0, 1); // 如果文件超过1个，只保留最后一个
      // }

      this.delRiverData.files = fileList.map(item => item.response.result.path)
    },
    // 删除河流
    delRiver () {
      console.log(this.delRiverData)
      let params = {
        data: this.delRiverData,
        url: this.urlRiverDel,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.$Message.success({
              content: res.data.message
            });
            this.hideRiverModal()
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      }
      ajaxPost(params);
    },
    changeDang() {
      let params = {
        data: {
          content: this.editorContent,
          river_name: this.river_name,
          river_no: this.river_no,
        },
        url: this.urlYiHeYiDang,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.$Loading.finish();
            this.dangModal = false;
            this.$Message.success({
              content: '上传成功',
            });
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    getRiverNum() {
      let params = {
        data: {},
        url: this.urlRiverNum,
        token: storage.session.get('token'),
        success: res => {
          res.data.result.map(item => {
            if (item._id === '主要河道') {
              this.main = item.num;
            } else if (item._id === '支涌') {
              this.tributary = item.num;
            } else if (item._id === '主干河涌') {
              this.mainRiver = item.num;
            }
          });
        },
      };
      if (this.formItem.area !== '') {
        params.data.area = this.formItem.area;
      }
      ajaxPost(params);
    },
    getAllRiver() {
      let params = {
        data: {
          fieldName: ['river_name', 'river_no'],
        },
        url: this.urlRiverList,
        token: storage.session.get('token'),
        success: res => {
          this.riverList = res.data.result.result;
        },
      };
      ajaxPost(params);
    },
  },
  mounted() {
    editor = new E(this.$refs.editor);
    editor.customConfig.onchange = html => {
      this.editorContent = html;
    };
    editor.customConfig.uploadImgShowBase64 = true;
    editor.create();
    this.getRiver();
    // this.getAddress(); // 获取河长部门
    // this.getRiverNum(); // 获取河湖类型
    this.getAllRiver();
    let deps = JSON.parse(storage.session.get('department'));
    if (deps[0].area) {
      this.areaList = [deps[0].area];
    }
  },
  watch: {
    area(data) {
      console.log('watch area()', data);
      let i = data.length - 1;
      this.getReceive(data[i]);
    },
    'riverItem.area'(data) {
      this.getTown(data);
    },
    'riverItem.town'(data) {
      this.getVillage(data);
    },
  },
};
</script>
